<template>
    <div class="container">
        <header class="header">
            <div class="current-time">
                <div class="current-time-text">{{dateTime}}</div>
            </div>
            <div class="title">
                <div class="title-side">
                    <span class="title-side-val"><countTo :startVal="isNaN(parseFloat(oldData.d15)) ? 0 : parseFloat(oldData.d15)" :decimals="1" :endVal='parseFloat(chartData.d15)' :duration='duration'></countTo>吨</span>
                    <span class="center-side-label">昨日总产量</span>
                </div>
                <span class="title-name">合成纸生产精控云平台</span>
                <div class="title-side">
                    <span class="title-side-val"><countTo :startVal="isNaN(parseFloat(oldData.d16)) ? 0 : parseFloat(oldData.d16)" :decimals="1" :endVal='parseFloat(chartData.d16)' :duration='duration'></countTo>KW</span>
                    <span class="center-side-label">昨日总能耗</span>
                </div>
            </div>
            <div>
                <div class="control-bar">
                    <div :class="!isFullScreen ? 'full-screen' : 'exit-full-screen'" @click="onFullScreenButton"></div>
                </div>
            </div>
        </header>
        <div class="second-row">
            <!--左侧-->
            <div class="side-width left-cell">
                <div class="left-cell-top">
                    <div class="frame-content small-frame item-padding">
                        <div class="label-bar">
                            <span class="label-name">收卷实时状态</span>
                            <p class="label-icon"></p>
                        </div>
                        <div class="module-item-content">
                            <leftFirstCharts :chart-data="chartData"></leftFirstCharts>
                        </div>
                    </div>
                </div>
                <div class="left-cell-bottom">
                    <div class="frame-content small-frame item-padding">
                        <div class="label-bar">
                            <span class="label-name">模式中产量调整</span>
                            <p class="label-icon"></p>
                        </div>
                        <div class="module-item-content">
                            <first-second-charts :chart-data="chartData"></first-second-charts>
                        </div>
                    </div>
                </div>
            </div>
            <!--中间-->
            <div class="center center-cell">
                <div class="center-content">
                    <div class="title-frame">当日下料量</div>
                    <!--地球左侧-->
                    <div class="left-first-label-val">
                        <span class="label-val-item val-item"><countTo :startVal="isNaN(parseFloat(oldData.d4)) ? 0 : parseFloat(oldData.d4)" :decimals="1" :endVal='parseFloat(chartData.d4)' :duration='duration'></countTo></span>
                        <span class="label-val-item">当日累计卷长</span>
                    </div>
                    <div class="left-second-label-val">
                        <span class="label-val-item val-item"><countTo :startVal="isNaN(parseFloat(oldData.d9)) ? 0 : parseFloat(oldData.d9)" :decimals="1" :endVal='parseFloat(chartData.d9)' :duration='duration'></countTo></span>
                        <span class="label-val-item">当日辅挤2下料量</span>
                    </div>
                    <div class="left-three-label-val">
                        <span class="label-val-item val-item"><countTo :startVal="isNaN(parseFloat(oldData.d5)) ? 0 : parseFloat(oldData.d5)" :decimals="1" :endVal='parseFloat(chartData.d5)' :duration='duration'></countTo></span>
                        <span class="label-val-item">当日辅挤1下料量</span>
                    </div>
                    <!--地球右侧-->
                    <div class="right-first-label-val">
                        <span class="label-val-item val-item"><countTo :startVal="isNaN(parseFloat(oldData.d7)) ? 0 : parseFloat(oldData.d7)" :decimals="1" :endVal='parseFloat(chartData.d7)' :duration='duration'></countTo></span>
                        <span class="label-val-item">当日主挤下料量</span>
                    </div>
                    <div class="right-second-label-val">
                        <span class="label-val-item val-item"><countTo :startVal="isNaN(parseFloat(oldData.d8)) ? 0 : parseFloat(oldData.d8)" :decimals="1" :endVal='parseFloat(chartData.d8)' :duration='duration'></countTo></span>
                        <span class="label-val-item">当日辅挤4下料量</span>
                    </div>
                    <div class="right-three-label-val">
                        <span class="label-val-item val-item"><countTo :startVal="isNaN(parseFloat(oldData.d6)) ? 0 : parseFloat(oldData.d6)" :decimals="1" :endVal='parseFloat(chartData.d6)' :duration='duration'></countTo></span>
                        <span class="label-val-item">当日辅挤3下料量</span>
                    </div>
                </div>
            </div>
            <!--右侧-->
            <div class="side-width right-cell">
                <div class="right-cell-top">
                    <div class="frame-content small-frame item-padding">
                        <div class="label-bar">
                            <span class="label-name">温湿度状态</span>
                            <p class="label-icon"></p>
                        </div>
                        <div class="temperature-humidity-bar">
                            <div class="temperature">
                                <span class="temperature-label">当前温度</span>
                                <div class="tem-hum-val">
                                    <countTo :startVal="isNaN(parseFloat(oldData.d10)) ? 0 : parseFloat(oldData.d10)" :decimals="1" :endVal='parseFloat(chartData.d10)' :duration='duration'></countTo>℃
                                </div>
                            </div>
                            <div class="humidity">
                                <span class="humidity-label">当前湿度</span>
                                <div class="tem-hum-val">
                                    <countTo :startVal="isNaN(parseFloat(oldData.d11)) ? 0 : parseFloat(oldData.d11)" :decimals="1" :endVal='parseFloat(chartData.d11)' :duration='duration'></countTo>%
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-cell-bottom">
                    <div class="frame-content small-frame item-padding" style="position: relative;">
                        <div class="label-bar">
                            <span class="label-name">功率状态</span>
                            <p class="label-icon"></p>
                        </div>
                        <div class="module-item-content" style="height: 100%;">
                            <right-second-charts :chart-data="chartData"></right-second-charts>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="three-row">
            <div class="second-row-content big-frame item-padding">
                <div class="label-bar">
                    <span class="label-name">合成纸数据展示</span>
                    <p class="label-icon"></p>
                </div>
                <div class="table-header">
                    <div
                        class="table-cell"
                        v-for="(item, index) in tableHeader"
                        :key="index"
                    >
                        {{ item }}
                    </div>
                </div>
                <div
                    class="table-body-row"
                    v-for="(item, index) in chartData.d14"
                    :key="index"
                    :style="calRow(index)"
                >
                    <div class="table-cell">{{item.t1}}</div>
                    <div class="table-cell"><countTo :startVal="!oldData.d14 || oldData.d14.length === 0 ? 0 : parseFloat(oldData.d14[index].t2)" :decimals="1" :endVal='parseFloat(item.t2)' :duration='duration'></countTo>RPM</div>
                    <div class="table-cell"><countTo :startVal="!oldData.d14 || oldData.d14.length === 0 ? 0 : parseFloat(oldData.d14[index].t3)" :decimals="1" :endVal='parseFloat(item.t3)' :duration='duration'></countTo>RPM</div>
                    <div class="table-cell"><countTo :startVal="!oldData.d14 || oldData.d14.length === 0 ? 0 : parseFloat(oldData.d14[index].t4)" :decimals="1" :endVal='parseFloat(item.t4)' :duration='duration'></countTo>%</div>
                    <div class="table-cell"><countTo :startVal="!oldData.d14 || oldData.d14.length === 0 ? 0 : parseFloat(oldData.d14[index].t5)" :decimals="1" :endVal='parseFloat(item.t5)' :duration='duration'></countTo>KG</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import leftFirstCharts from './components/left-first';
    import firstSecondCharts from './components/first-second';
    import rightSecondCharts from './components/right-second';
    import mixins from './minxis';
    import axios from 'axios';
    import countTo from 'vue-count-to';

    let timer = {};
    let timer2 = {};
    export default {
        components: {leftFirstCharts, rightSecondCharts, firstSecondCharts, countTo},
        mixins: [mixins],
        data () {
            return {
                duration: 2000,
                chartData: {},
                oldData: {
                    d14: []
                },
                isFullScreen: false,
                dateTime: '',
                tableHeader: ['名称', '标准值', '实际值', '电流百分比', '累计下料量'],
                colors: ['#99ab7f', '#a57b3d', '#7e2534', '#a72b34', '#2aa9a1', '#638dab']
            };
        },
        watch: {
            chartData: {
                handler (newVal, oldVal) {
                    this.oldData = oldVal;
                },
                deep: true
            }
        },
        methods: {
            onFullScreenButton () {
                this.isFullScreen = !this.isFullScreen;
                if (this.isFullScreen) {
                    this.fullscreen();
                } else {
                    this.exitFullscreen();
                }
            },
            fullscreen () {
                let main = document.body;
                if (main.requestFullscreen) {
                    main.requestFullscreen();
                } else if (main.mozRequestFullScreen) {
                    main.mozRequestFullScreen();
                } else if (main.webkitRequestFullScreen) {
                    main.webkitRequestFullScreen();
                } else if (main.msRequestFullscreen) {
                    main.msRequestFullscreen();
                }
            },
            exitFullscreen () {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            },
            getCurrentTime () {
                timer = setInterval(() => {
                    let d = new Date();
                    let year = d.getFullYear();
                    let month = this.fillZero(d.getMonth() + 1);
                    let day = this.fillZero(d.getDate());
                    let hours = this.fillZero(d.getHours());
                    let minutes = this.fillZero(d.getMinutes());
                    let seconds = this.fillZero(d.getSeconds());
                    this.dateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                }, 1000);
                this.$once('hook:beforeDestroy', () => {
                    clearInterval(timer);
                });
            },
            fillZero (val) {
                let newVal = '';
                val < 10 ? newVal = `0${val}` : newVal = val;
                return newVal;
            },
            getChartDataRequest () {
                return axios.post('http://121.36.203.32:8096/huanYu/show').then(res => {
                    if (res.data.status === 200) {
                        if (res.data.status === 200) {
                            this.chartData = res.data.res;
                        } else {
                            this.chartData = {};
                        }
                        timer2 = setInterval(() => {
                            clearInterval(timer2);
                            this.getChartDataRequest();
                        }, 5000);
                        this.$once('hook:beforeDestroy', () => {
                            clearInterval(timer2);
                        });
                    }
                });
            }
        },
        computed: {
            calRow () {
                return (index) => {
                    return {
                        marginTop: !index ? '10px' : '',
                        color: this.colors[index]
                    };
                };
            }
        },
        mounted () {
            this.getChartDataRequest();
            this.getCurrentTime();
        }
    };
</script>
<style scoped lang="less">
    @import "index";
</style>
